<template>
	<!-- 轮播 -->
	<view class="banner-swiper-box" v-if="detail.length">
		<swiper class="banner-carousel" circular @change="swiperChange" :autoplay="false">
			<swiper-item v-for="(items,ind) in detail" :key="ind" class="carousel-item">
				<image class="swiper-image" :src="items.src" lazy-load @tap="$emit('navtive',items.url)" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<view class="banner-swiper-dots">
			<text v-for="(dot, index) in detail.length" :key="index" :class="swiperCurrent === index ? 'banner-dot-active' : 'banner-dot'" ></text>
		</view>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			swiperCurrent: 0
		};
	},
	props: {
		detail: {
			type: Array
		}
	},
	methods: {
		swiperChange(e) {
			this.swiperCurrent = e.detail.current;
			// console.log(e)
		}
	}
};
</script>

<style lang="scss">
.hide-canvas {
	position: fixed!important;
	top: -99999upx;
	left: -99999upx;
	z-index: -99999;
}

// 轮播
.banner-swiper-box{
	// margin-bottom: 20rpx;
	background: #fff;
	 
	height: 350upx;
	position: relative;
	padding:0 20upx;
	box-sizing: border-box;
}
.banner-carousel {
	width: 100%;
	height:100%;
	position: relative;
	border-radius: 10upx;
	overflow: hidden;
	.carousel-item {
		width: 100%;
		height: 100%;
		// padding: 0 28upx;
		overflow: hidden;
	}

	.swiper-image {
		width: 100%;
		height: 100%;
		    border-radius: 5px;
		// border-radius: 10upx;
		// background: #ccc;
	}
}

.banner-swiper-dots {
	display: flex;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 34rpx;
	z-index: 66;
	.banner-dot {
		width: 14rpx;
		height: 14rpx;
		background: rgba(51,51,51,.3);
		border-radius: 50%;
		margin-right: 10rpx;
		transition:all 0.3s;
	}

	.banner-dot-active {
		width: 14rpx;
		height: 14rpx;
		background:rgba(51,51,51,.6);
		border-radius: 50%;
		margin-right: 10rpx;
	}
}
</style>
